<template>
    <div class="container">

        <div v-if="!utils.getIsApp()" class="common-header-wrap">
            <mt-header title="选择日期与数量" class="common-header">
                <mt-button slot="left" icon="back" @click="$router.go(-1)"></mt-button>
            </mt-header>
        </div>

        <div class="star-address">
            <div style="font-weight: bold">出发地</div>
            <div style="color:#B5B5B5;font-size: .6rem" @click="tocity">{{city?city.name:'请选择出发城市'}} ></div>
        </div>
        <div class="date-show">出发日期<span style="color:#3C7C45;font-size:.7rem;margin-left: 15px">{{starday?starday:'请选择出发日期'}}</span>
        </div>

        <div class="calendar-wrapper">
            <div class="calendar-month"><i v-if="flag" class="iconfont" @click="goSearch(0)">&#xe64f;</i><span>{{date.year+'年'+date.month+'月'}}</span><i
                    v-if="!flag" class="iconfont" @click="goSearch(1)">&#xe650;</i></div>
            <div class="calendar-title">
                <div class="item"><span>日</span></div>
                <div class="item"><span>一</span></div>
                <div class="item"><span>二</span></div>
                <div class="item"><span>三</span></div>
                <div class="item"><span>四</span></div>
                <div class="item"><span>五</span></div>
                <div class="item"><span>六</span></div>
            </div>
            <div class="calendar-content">
                <div class="item item-title" v-for="n in week" :key="'t'+n"></div>
                <div class="item" v-for="(item,index) in daysArr" :key="'c'+index" :class="{active:item.active}"
                     @click="today>item.num?'':selectday(index)">
                    <div v-if="item.active" class="pre-star">出发</div>
                    <span class="pre-num" :class="{'disabled-active':today>item.num}">{{item.num}}</span>
                </div>
            </div>
        </div>

        <div class="submit-meal">
            <div class="submit-meal-title">套餐类型</div>
            <div class="submit-meal-body">
                <div class="submit-meal-list" :class="{'active':item.id==caseid}" @click="searchcase(item.id)"
                     v-for="(item,index) in caselist" :key="index">
                    {{item.name}}
                    <img @click.stop="getTravelcasedetail(item.id)" class="case-detail-question" src="../../../assets/image/home/icon-question.png">
                </div>
            </div>
        </div>

        <div class="submit-meal">
            <div class="submit-meal-title">出游人群</div>
            <div class="submit-meal-body">
                <div class="submit-people-list" :class="{'active':peopletype===1}" @click="searchpeople(1)">
                    单人
                </div>
                <div class="submit-people-list" :class="{'active':peopletype===2}" @click="searchpeople(2)">
                    团体
                </div>
            </div>
        </div>
        <div class="submit-meal">
            <div class="submit-meal-title">联系人信息</div>
            <div class="submit-information-list">
                <div class="information-title">姓名</div>
                <input class="information-input" v-model="username" value="" placeholder="请填写联系人姓名">
            </div>
            <div class="submit-information-list">
                <div class="information-title">手机</div>
                <input class="information-input" type="number" v-model="usermobile" value="" placeholder="请填写联系人手机号码">
            </div>
        </div>
        <div class="submit-meal">
            <div class="submit-meal-title">备注</div>
            <textarea class="submit-remarks" v-model="remarks" placeholder="1、若选择“团体”出游请在此填写人数，如：成人4人,儿童2人
2、在此描述您的旅行需求，如需发票请备注。"></textarea>
        </div>
        <div style="width: 100vw;height: 40px"></div>
        <div class="teatravel-foot" @click="getTravelbuystep1">{{edit?'修改行程':'提交行程'}}</div>

<!--        套餐详情-->
        <div v-if="caseshow" @click="casehide" class="case-mark"></div>
        <div v-if="caseshow" class="case-detail">
            <div class="case-detail-head">{{casedetail.name}}</div>
            <div class="case-detail-list">
                <div class="case-detail-list-title">景点</div>
                <div class="case-detail-list-content">{{casereturn('spot')}}</div>
            </div>
            <div class="case-detail-list">
                <div class="case-detail-list-title">驿站</div>
                <div class="case-detail-list-content">{{casereturn('post')}}</div>
            </div>
            <div class="case-detail-list">
                <div class="case-detail-list-title">旅店</div>
                <div class="case-detail-list-content">{{casedetail.hotel[0].name}}</div>
            </div>
            <div class="case-detail-list">
                <div class="case-detail-list-title">汽车</div>
                <div class="case-detail-list-content">{{casedetail.cart[0].name}}</div>
            </div>
            <div class="case-detail-list">
                <div class="case-detail-list-title">餐食</div>
                <div class="case-detail-list-content">{{casereturn('food')}}</div>
            </div>
        </div>

    </div>
</template>

<script>
    import {getTravelcase,getTravelbuystep1,getTravelcasedetail,getTravelorderdetail,getTravelupdateorder} from '../../../api/travel'
    import {mapState, mapMutations, mapActions} from 'vuex'
    import {Toast, Indicator} from 'mint-ui'
    import Teatravel from "../teatravel/Teatravel";
    import Storagedetail from "../storagedetail/Storagedetail";

    export default {
        name: 'Teatravelsubmit1',
        components: {Storagedetail, Teatravel},
        data() {
            return {
                day_list: false,
                if_signin: false,
                monthDay: [31, 0, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], // 每月天数
                week: '', // 空白格子数
                date: {
                    year: '',
                    month: ''
                }, //当前选择年月
                daysArr: [], // 本月日期数组
                starday: '', //选中出发时间
                flag: false, //月份切换标记，false:仅可点击下个月 true：仅可点击上个月
                caselist: [], // 套餐类型
                caseid: '', //当前选中套餐id
                peopletype:'', // 当前出游人群类型 1:单人 2：团体
                username:'' , //姓名
                usermobile:'', //电话
                remarks:'', //备注
                today:'' , //本月：今日几号，下个月：值为-1
                casedetail:'' ,//套餐详情
                caseshow:false , //套餐详情显示
                edit: false, //是否修改

            }
        },
        created() {
        },
        computed: {
            ...mapState({
                city: state => state.travel.city
            })
        },
        mounted() {
            this.getinittime();
            this.getTravelcase();
        },
        methods: {
            ...mapMutations({
                savebuy: 'savebuy',
                savebuyshow: 'savebuyshow',
                savecity: 'savecity',
                saveagency: 'saveagency',
                savehotel: 'savehotel'
            }),

            //获取详情
            getTravelorderdetail() {
                this.edit = true;
                getTravelorderdetail(this.$route.query.edit_id).then(res => {
                    let result = res.result.shot_lists;
                    // this.savecity(result.city);
                    this.caseid = result.case.id;
                    this.peopletype = result.people;
                    this.username = result.name;
                    this.usermobile = result.mobile;
                    this.remarks = result.remark;
                }).catch(function (error) {
                    Toast(error.message)
                })
            },

            //关闭详情幕布
            casehide(){
              this.caseshow=false;
            },

            //套餐详情显示处理
            casereturn(type){
                let data='';
                for (let i=0;i<this.casedetail[type].length;i++){
                    if(data==''){
                        data=this.casedetail[type][i].name
                    }else {
                        data+=','+this.casedetail[type][i].name
                    }
                }
                return data
            },

            //获取套餐详情
            getTravelcasedetail(id){
                Indicator.open();
                getTravelcasedetail(id).then(res=>{
                      this.casedetail=res.result;
                      Indicator.close();
                      this.caseshow=true;
                })
            },

            //修改订单
            getTravelupdateorder(result){
                getTravelupdateorder(this.$route.query.edit_id,result).then(res=>{
                    Toast('修改成功');
                    setTimeout(()=>{
                        this.$router.push({name:'HomeTeaorderlist'})
                    },1500)
                }).catch(function (error) {
                    Toast(error.message)
                })
            },

            //提交行程
            getTravelbuystep1(){
                if(this.username==''||this.usermobile==''){
                    Toast('姓名和联系方式不能为空!')
                    return;
                }
                if(this.starday==''||this.endday==''){
                    Toast('请先选择日期!');
                    return;
                }
                let result={
                    type:1,
                    start:this.starday+' 00:00:00',
                    city_id:this.city.id,
                    case_id:this.caseid,
                    people:this.peopletype,
                    name:this.username,
                    mobile:this.usermobile,
                    remark:this.remarks
                };
                this.savebuy(result);
                if(this.edit){
                    this.getTravelupdateorder(result);
                    return;
                }
                getTravelbuystep1(result).then(res=>{
                    this.savebuyshow(res.result)
                    this.$router.push({name:'HomeTeatravelmade',query:{type:1}})
                }).catch(function (error) {
                    Toast(error.message)
                })
            },
            //获取套餐类型
            getTravelcase() {
                getTravelcase(this.$route.query.id).then(res => {
                    this.caselist = res.result;
                    if (this.$route.query.edit_id) {
                        this.getTravelorderdetail();
                    }
                }).catch(function (error) {
                    Toast(error.message)
                })
            },
            //选择套餐
            searchcase(id) {
                this.caseid = id
            },
            //选择出游人群
            searchpeople(type) {
                this.peopletype=type;

            },
            // 切换日期
            goSearch() {
                this.starday = '';
                let month = new Date().getMonth() + 1;
                let nmonth = this.date.month;
                if (this.flag) { // 前一个月
                    this.getinittime(month)
                    this.today= new Date().getDate();
                } else { // 后一个月
                    this.getinittime(nmonth + 1);
                    this.today=-1
                }
                this.flag = !this.flag
            },
            // 初始化时间
            getinittime(mon) {
                let time = new Date();
                let day = time.getDate();
                this.today=day;
                let month = '';
                if (mon) {
                    month = mon
                } else {
                    month = time.getMonth() + 1;
                }
                let year = time.getFullYear();
                let week = new Date(`${year}/${month}/1`).getDay();
                let days = this.whatMonth(year, month);
                let daysArr = [];
                for (let i = 0; i < days; i++) {
                    daysArr.push({num: i + 1, active: false})
                }
                this.date.year = year;
                this.date.month = month;
                this.week = week;
                this.daysArr = daysArr;
            },
            //返回月份天数
            whatMonth(year, month) {
                if (month == 2) {
                    if (this.isLeap(year)) {
                        return 29
                    } else {
                        return 28
                    }
                } else {
                    return this.monthDay[month * 1 - 1]
                }
            },
            //判断是否闰年
            isLeap(year) {
                if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
                    return true;
                } else {
                    return false;
                }
            },
            // 选择时间
            selectday(index) {
                for (let i = 0; i < this.daysArr.length; i++) {
                    this.daysArr[i].active = false;
                }
                this.daysArr[index].active = true;
                this.starday = `${this.date.year}-${this.date.month}-${this.daysArr[index].num}`
            },
            //前往选择城市
            tocity() {
                this.$router.push({name: 'HomeTeatravelcity'})
            }

        }
    }
</script>

<style scoped lang="scss">
    .case-mark{
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,.3);
    }
    .case-detail{
        height: fit-content;
        position: fixed;
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 80vw;
        background: white;
        padding: 15px;
        border-radius: 8px;
        .case-detail-head{
            font-size: .8rem;
            text-align: center;
        }
        .case-detail-list{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #efeff2;
            .case-detail-list-title{
                font-size: .6rem;
                font-weight: bold;
            }
            .case-detail-list-content{
                font-size: .6rem;
                font-weight: bold;
                color: #b5b5b5;
            }
        }

    }
    .case-detail-question{
        position: absolute;
        right: 15px;
        top: .1rem;
        width: 1rem;
        height: 1rem;

    }
    .disabled-active{
        color: #B5B5B5;
    }
    .submit-meal {
        margin-top: 10px;
        background: white;
        padding: 10px 25px;

        .submit-meal-title {
            font-size: .7rem;
            font-weight: bold;
        }

        .submit-meal-body {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;

            .submit-meal-list {
                position: relative;
                margin-top: 10px;

                margin-right: 15px;
                width: 36vw;
                /*width: 140px;*/
                text-align: center;
                padding: 4px 0;
                font-size: .6rem;
                background: #EEEFF2;
                border-radius: 100px;
            }

            .submit-people-list {
                margin-top: 10px;

                margin-right: 15px;
                width: 80px;
                text-align: center;
                padding: 4px 0;
                font-size: .6rem;
                background: #EEEFF2;
                border-radius: 100px;
            }



            .active {
                background: $primaryColor;
                color: white;
            }
        }
        .submit-information-list{
            margin-top: 10px;
            display: flex;
            flex-direction: row;
            align-items: center;
            .information-title{
                font-size: .6rem;
                margin-right: 20px;
            }
            .information-input{
                border: none;
            }
        }
        .submit-remarks{
            width: 100%;
            height: 80px;
        }
    }

    .date-show {
        margin-top: 10px;
        font-size: .7rem;
        font-weight: bold;
        background: white;
        padding: 20px 25px 5px 25px;
    }

    .star-address {
        margin-top: 10px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 10px 25px;
        font-size: .7rem;
        background: white;
        align-items: center;
    }

    .point-signin-header {
        margin-bottom: 1rem;
        background: $primaryColor;
        padding: .5rem;
        text-align: center;

        .btn-wrapper {
            height: 4rem;
            width: 4rem;
            margin: 1rem auto;
            border-radius: 50%;
            background: $primaryColor;
            border: .3rem solid rgba(255, 255, 255, .5);
            overflow: hidden;

            &.active {
                .btn {
                    > div {
                        background: $primaryColor;
                        color: rgba(255, 255, 255, .8);
                        line-height: 3.4rem;
                    }
                }
            }

            .btn {
                background: #fff;
                width: 100%;
                height: 100%;
                padding: .3rem;
                box-sizing: border-box;

                > div {
                    border-radius: 50%;
                    width: 100%;
                    height: 100%;
                    margin: 0 auto;
                    border: 1px solid $primaryColor;
                    box-sizing: border-box;

                    .title {
                        font-size: .8rem;
                        color: $primaryColor;
                        margin-top: .7rem;
                    }

                    .content {
                        font-size: .6rem;
                        color: $primaryColor
                    }
                }
            }
        }

        .notice {
            font-size: .6rem;
            color: #fff;
            opacity: .8
        }
    }

    .calendar-wrapper {
        background: #fff;

        .calendar-month {
            text-align: center;
            font-size: .6rem;
            line-height: 2rem;
            border-bottom: 1px solid #eee;
            margin-bottom: .5rem;

            > span {
                margin: 0 1rem;
            }

            i {
                font-size: .6rem;
            }
        }

        .calendar-title {
            .item {
                height: 1.5rem;
                line-height: 1.5rem;
            }
        }

        .item {
            position: relative;
            float: left;
            width: 14.28%;
            height: 3rem;
            text-align: center;
            font-size: .7rem;
            line-height: 3.8rem;

            .pre-num {
                height: 1rem;
                width: 1rem;
                line-height: 1rem;
                border-radius: 50%;
                display: inline-block;
                margin: 0 auto;
            }

            .pre-star {
                position: absolute;
                line-height: normal;
                width: 100%;
                top: .7rem;
                font-size: .5rem;
            }

            &.active {
                background: $primaryColor;
                color: #fff
            }
        }

        .calendar-content, .calendar-title {
            overflow: hidden;
            padding: 0 .5rem;
        }

    }
    .teatravel-foot{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 40px;
        font-size: .9rem;
        font-weight: bold;
        color: white;
        background: $primaryColor;
        text-align: center;
        line-height: 40px;
    }
</style>
